<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{path:'/'}">系统首页</el-breadcrumb-item>
        <el-breadcrumb-item>富文本编辑器</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <quill-editor :content="content" :disabled="disabled" :options="options"
                    @change="onEditorChange"
      ></quill-editor>
      <el-button type="primary" style="margin-top: 15px" @click="submit">提交</el-button>
    </div>
  </div>
</template>

<script>
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  import {quillEditor} from 'vue-quill-editor'

  export default {
    name: "Editor",
    components: {
      quillEditor
    },
    data() {
      return {
        content: '<span style="color: red"><h1>hello world</h1></span>',
        disabled: false,
        options: {
          placeholder: '开始写点什么 。。。'
        }
      }
    },
    methods: {
      onEditorChange({quill, html, text}) {
        this.content = html;
      },
      submit() {
        this.$confirm('您提交的内容为：【' + this.content + '】确定提交？', '提示').then(() => {
          this.$message.success('提交成功');
        })
      }
    }

  }
</script>

<style scoped>

</style>
